<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">


    <!-- Demo 14 -->
    <h4 id="demo14">Scroll more items</h4><hr>

    <p>
        You can scroll more than one item (the default), using this option. Provide the number of items to scroll, and
        the items will start scrolling by the specified number when the next or previous button is clicked.
    </p>

    <div class="custom-container scrollMore">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".scrollMore .carousel").jCarouselLite({
    btnNext: ".scrollMore .next",
    btnPrev: ".scrollMore .prev",
    scroll: 2
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".scrollMore .carousel").jCarouselLite({
                btnNext: ".scrollMore .next",
                btnPrev: ".scrollMore .prev",
                scroll: 2
            });
        });
    </script>


</div>
</body>
</html>